<template>
  <div class="about">
    <!-- class 有对象格式（键名就是类名，键值的真假表示类名是否添加）、数组格式（变量的值就是类名） -->
    <!-- style 有对象格式（类似于css的写法，需要用驼峰命名）、数组格式（里边存放对象格式的样式）、多重值的写法（某一个属性可以使用数组来写多个值）-->
    <div :style="[objStyle, otherStyle]">
      <p>hello world</p>
    </div>
    <div>
      <button @click="show = !show">显示</button>
      <!-- <transition name="fade">
        <p v-if="show">hello</p>
      </transition> -->
      <!-- <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition> -->
      <!-- <transition name="bounce" :duration="{ enter: 500, leave: 800 }">
        <p v-if="show">hello</p>
      </transition> -->
      <!-- eg3 -->
      <!-- <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition> -->
      <!-- eg4 -->
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p v-if="show">Demo</p>
      </transition>
    </div>
  </div>
</template>

<script>
import Velocity from "velocity-animate";
export default {
  name: "TransitionView",
  data() {
    return {
      objStyle: {
        color: "red",
        fontSize: "13px",
      },
      otherStyle: {
        fontWeight: "700",
        // display: "flex",
        display: ["-webkit-box", "-ms-flexbox", "flex"],
      },
      show: true,
    };
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0;
      el.style.transformOrigin = "left";
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
      Velocity(el, { fontSize: "1em" }, { complete: done });
    },
    leave: function (el, done) {
      Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
      Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        {
          complete: done,
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
